<template>
    <div class="header_view">
        <div class="header-left">
            <div class="shrink-wrap" @click="callCallapse()">
                <icon-svg name="shrink" class="fs-20"></icon-svg>
            </div>
            <div class="bread-wrap">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item @click="homeBrClick" :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="br in breads">{{ br }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <div class="header-right">
            <!-- <el-color-picker v-model="primaryColor" @change="colorChange" /> -->
            <icon-svg v-if="env === 'development'" class="mr-10 pointer fs-16" @click="openSetting()"
                name="local_setting"></icon-svg>
            <img src="../assets/imgs/avatar.png" alt="" />
            <el-dropdown>
                <span class="el-dropdown-link">
                    <span class="user-wrap fs-16">{{ appStore.userInfo?.nickName }}</span>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <el-drawer v-model="drawerOpen" size="400" style="font-size: .16rem;" title="系统设置">
        <p>
            <span class="mr-10 fs-16">主题色</span>
            <el-color-picker v-model="colorMap.primary" @change="(val) => colorChange(val, colors.primary)" />
        </p>
        <p>
            <span class="mr-10 fs-16">成功色</span>
            <el-color-picker v-model="colorMap.success" @change="(val) => colorChange(val, colors.success)" />
        </p>
        <p>
            <span class="mr-10 fs-16">警告色</span>
            <el-color-picker v-model="colorMap.warning" @change="(val) => colorChange(val, colors.warning)" />
        </p>
        <p>
            <span class="mr-10 fs-16">危险色</span>
            <el-color-picker v-model="colorMap.danger" @change="(val) => colorChange(val, colors.danger)" />
        </p>
        <p>
            <span class="mr-10 fs-16">默认色</span>
            <el-color-picker v-model="colorMap.info" @change="(val) => colorChange(val, colors.info)" />
        </p>
        <!-- <SideView></SideView> -->
    </el-drawer>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import useApp from '@/store/app'
import SideView from './SideView.vue'

enum colors {
    primary,
    success,
    warning,
    danger,
    info
}

@Options({
    components: {
        SideView
    },
    computed: {
        breads() {
            const that = this as HeaderView
            const brs: string[] = []
            function getBr(menu) {
                if (menu && menu.title) {
                    brs.unshift(menu.title)
                    if (menu.parent) {
                        getBr(menu.parent)
                    }
                }
            }
            getBr(that.appStore.currentMenu)
            return brs
        }
    },
    mounted() {
        this.appStore.initUserInfo()
    }
})
export default class HeaderView extends Vue {
    appStore = useApp()
    env = process.env.NODE_ENV
    breads: any
    colors = colors
    callCallapse() {
        this.appStore.menuCollapse = !this.appStore.menuCollapse
    }

    colorMap = {
        primary: '#409EFF',
        success: '#67C23A',
        warning: '#E6A23C',
        danger: '#F56C6C',
        info: '#909399'
    }

    drawerOpen = false

    openSetting() {
        this.drawerOpen = true
    }

    colorChange(val: string | null, type: number): any {
        switch (type) {
            case colors.primary:
                document.body.style.setProperty('--el-color-primary', val)
                document.body.style.setProperty('--el-menu-active-color', val)
                document.body.style.setProperty('--el-color-primary-light-3', val + 'ab')
                document.body.style.setProperty('--el-color-primary-light-5', val + '78')
                document.body.style.setProperty('--el-color-primary-dark-2', val)
                break;
            case colors.success:
                document.body.style.setProperty('--el-color-success', val)
                document.body.style.setProperty('--el-color-success-light-3', val + 'ab')
                document.body.style.setProperty('--el-color-success-light-5', val + '78')
                break
            case colors.warning:
                document.body.style.setProperty('--el-color-warning', val)
                document.body.style.setProperty('--el-color-warning-light-3', val + 'ab')
                document.body.style.setProperty('--el-color-warning-light-5', val + '78')
                break
            case colors.danger:
                document.body.style.setProperty('--el-color-danger', val)
                document.body.style.setProperty('--el-color-danger-light-3', val + 'ab')
                document.body.style.setProperty('--el-color-danger-light-5', val + '78')
                break
            case colors.info:
                document.body.style.setProperty('--el-color-info', val)
                document.body.style.setProperty('--el-color-info-light-3', val + 'ab')
                document.body.style.setProperty('--el-color-info-light-5', val + '78')
                break
        }

    }

    homeBrClick() {
        this.appStore.defaultActive = '/home'
        this.appStore.currentMenu = {}
    }

    logout() {
        sessionStorage.clear()
        window.location.reload()
    }
}
</script>
<style lang="scss" scoped>
.header_view {
    height: 60px;
    background-color: $primary-header--color;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666;

    .header-left {
        display: flex;
        align-items: center;
    }

    .header-right {
        display: flex;
        align-items: center;
        padding-right: 20px;

        img {
            width: 40px;
            margin-right: 10px;
        }
    }


    .shrink-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 10px;

        img {
            width: 20px;
        }
    }

    .bread-wrap {
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 20px;

        :deep(.el-breadcrumb__item) {
            .el-breadcrumb__inner {
                color: #666;
            }

            .el-breadcrumb__separator {
                color: #666;
            }
        }
    }

    .user-wrap {
        color: #666;
    }
}
</style>
<style lang="scss"></style>